<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            width: 640px;
            height: 280px;
            border: 10px solid lightpink;
            display: flex;
            position: relative;
            overflow: hidden;
            margin: 100px auto;
        }
        li{
            list-style: none;
            position: absolute;
            top: 0;
            cursor: pointer;
            
        }
        ul>li:nth-of-type(1){
            left: 0;
        }
        ul>li:nth-of-type(2){
           left: 25%;
       }
       ul>li:nth-of-type(3){
           left: 50%;
       } ul>li:nth-of-type(4){
           left: 75%;
       }
    </style>
</head>
<body>
    <ul>
        <li><img class="img1" src="./images/01.jpg" alt=""></li>
        <li><img class="img2" src="./images/02.jpg" alt=""></li>
        <li><img class="img3" src="./images/03.jpg" alt=""></li>
        <li><img class="img4" src="./images/04.jpg" alt=""></li>
    </ul>
</body>
</html>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script>
    let li=$('ul>li');
    li.mouseenter(function(e){
        let _this=e.target;
        if(_this.className=='img1'){
            li.siblings('li:eq(0)').css('left','70%');
            li.siblings('li:eq(1)').css('left','80%');
            li.siblings('li:eq(2)').css('left','90%');
        }
        if(_this.className=='img2'){
            li.css('left','0');
            li.siblings('li:eq(0)').css('left','8%');
            li.siblings('li:eq(1)').css('left','80%');
            li.siblings('li:eq(2)').css('left','90%');
        }
        if(_this.className=='img3'){
            li.siblings('li:eq(0)').css('left','8%');
            li.siblings('li:eq(1)').css('left','16%');
            li.siblings('li:eq(2)').css('left','90%');
        }
        if(_this.className=='img4'){
            li.siblings('li:eq(0)').css('left','8%');
            li.siblings('li:eq(1)').css('left','16%');
            li.siblings('li:eq(2)').css('left','24%');
        }
    })
    li.mouseleave(function(){
        $('li:eq(0)').css('left','0%');
        $('li:eq(1)').css('left','25%');
        $('li:eq(2)').css('left','50%');
        $('li:eq(3)').css('left','75%');
    })
</script>